<template>
  <section class="border-box-13">
    <svg
      class="border-svg-container"
      :width="width"
      :height="height"
    >
      <path
        :fill="backgroundColor"
        :stroke="mergedColor[0]"
        :d="`
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
          L ${width - 20} 10 L ${width - 5} 25
          L ${width - 5} ${height - 5} L 20 ${height - 5}
          L 5 ${height - 20} L 5 20
        `"
      />

      <path
        fill="transparent"
        stroke-width="3"
        stroke-linecap="round"
        stroke-dasharray="10, 5"
        :stroke="mergedColor[0]"
        :d="`M 16 9 L 61 9`"
      />

      <path
        fill="transparent"
        :stroke="mergedColor[1]"
        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
      />

      <path
        fill="transparent"
        :stroke="mergedColor[1]"
        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
      />
    </svg>

    <section class="border-box-content">
      <slot />
    </section>
  </section>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

import { union } from '@/utils/index';
const props = defineProps({
  width: {
    type: Number,
    default: 100,
  },
  height: {
    type: Number,
    default: 100,
  },
  color: {
    type: Array,
    default: () => ([])
  },
  backgroundColor: {
    type: String,
    default: 'transparent'
  }
});

const defaultColor = ['#6586ec', '#2cf7fe'];
const mergedColor = ref([]);

const mergeColor = () => {
  mergedColor.value = union(defaultColor, props.color);
};

watch(
  () => props.color,
  () => {
    mergeColor();
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.border-box-13 {
  position: relative;
  width: 100%;
  height: 100%;

  .border-svg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
